import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './SymptomInput.css';

const SymptomInput = () => {
  const navigate = useNavigate();
  // 搜索输入状态
  const [searchText, setSearchText] = useState('');
  
  // 预设的活跃症状标签
  const [activeSymptoms, setActiveSymptoms] = useState([
    '情绪波动', '自我伤害'
  ]);
  
  // 症状列表显示状态
  const [showSymptomList, setShowSymptomList] = useState(false);
  
  // 预设的可选症状列表
  const availableSymptoms = [
    '呼吸困难', '社交焦虑', '很难说话', '双极性', '恐惧', '健忘症'
  ];
  
  // 处理搜索输入变化
  const handleSearchChange = (e) => {
    // 更新搜索文本状态
    setSearchText(e.target.value);
    
    // 如果输入内容不为空，显示症状列表以便快速添加
    if (e.target.value.trim() !== '') {
      setShowSymptomList(true);
    }
  };
  
  // 处理标签点击
  const handleSymptomClick = (symptom) => {
    // 将症状文本设置到搜索框中
    setSearchText(symptom);
  };
  
  // 处理标签移除
  const handleRemoveSymptom = (symptom) => {
    // 从活跃症状列表中移除指定症状
    setActiveSymptoms(activeSymptoms.filter(item => item !== symptom));
  };
  
  // 处理添加症状
  const handleAddSymptom = (symptom) => {
    // 检查症状是否已存在，避免重复添加
    if (!activeSymptoms.includes(symptom)) {
      // 限制最多选择3条症状
      if (activeSymptoms.length >= 3) {
        alert("最多只能选择3条症状");
        return;
      }
      
      // 添加到活跃症状列表
      setActiveSymptoms([...activeSymptoms, symptom]);
      
      // 清空搜索框，便于继续添加其他症状
      setSearchText('');
    }
  };
  
  // 处理搜索按钮点击
  const handleSearchClick = () => {
    // 切换症状列表显示状态
    setShowSymptomList(!showSymptomList);
  };
  
  // 处理下一步按钮点击
  const handleNextStep = () => {
    // 保存用户输入的症状信息并进入下一页
    console.log('进入下一步，当前症状:', activeSymptoms);
    
    // 导航到分析页面并传递症状数据
    navigate('/AIAssessment', { state: { symptoms: activeSymptoms } });
  };
  
  // 处理3D模型按钮点击
  const handleNavigateToModel = () => {
    navigate('/ai3dmodel');
  };
  
  // 显示症状输入页面
  return (
    // 整体页面容器
    <div className="symptom-container">
      {/* 顶部状态栏 */}
      <div className="status-bar">
        <span className="time">9:41</span>
        <div className="icons">
          <span className="signal">●●●●</span>
          <span className="wifi">●</span>
          <span className="battery">●</span>
        </div>
      </div>
      
      {/* 进度指示器 - 显示当前在第二步 */}
      <div className="progress-indicator">
        <div className="step completed">
          <div className="dot">✓</div>
        </div>
        <div className="step-line"></div>
        <div className="step active">
          <div className="dot"></div>
          <div className="label">步骤2</div>
        </div>
        <div className="step-line"></div>
        <div className="step">
          <div className="dot"></div>
        </div>
      </div>
      
      {/* 页面标题 */}
      <h2 className="page-title">你的症状是什么</h2>
      
      {/* 搜索框 */}
      <div className="search-container">
        <input
          type="text"
          className="search-input"
          value={searchText}
          onChange={handleSearchChange}
          placeholder="焦虑"
        />
        <button className="search-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
          </svg>
        </button>
      </div>
      
      {/* 活跃症状区域 */}
      <div className="active-symptoms-section">
        <h3 className="section-title">我的活跃症状</h3>
        
        <div className="symptoms-tags">
          {activeSymptoms.map((symptom, index) => (
            <div key={index} className="symptom-tag">
              <span 
                className="symptom-text"
                onClick={() => handleSymptomClick(symptom)}
              >
                {symptom}
              </span>
              <button 
                className="remove-tag" 
                onClick={() => handleRemoveSymptom(symptom)}
              >
                ×
              </button>
            </div>
          ))}
        </div>
      </div>
      
      {/* 症状检查器评分 */}
      <div className="score-section">
        <h3 className="section-title">症状检查器显示现分数</h3>
        
                  <div className="score-progress">
            <div className="progress-bar">
              <div 
                className={`progress ${activeSymptoms.length >= 3 ? 'full' : ''}`}
                style={{ 
                  width: `${(activeSymptoms.length / 3) * 100}%`,
                  animation: activeSymptoms.length >= 3 ? 'progressGlow 1.5s infinite' : 'none'
                }}
              ></div>
            </div>
          </div>
        
                  <p className="score-hint">
            {activeSymptoms.length >= 3 
              ? "已达到建议症状数量，可获得更精确的结果" 
              : `当前已选择 ${activeSymptoms.length}/3 个症状，更多症状意味着更精确的结果`}
          </p>
          <p className="limit-hint">最多只能选择3条症状</p>
      </div>
      
      {/* 症状列表框 - 仅当showSymptomList为true时显示 */}
      {showSymptomList && (
        <div className="symptoms-list-overlay" onClick={() => setShowSymptomList(false)}>
          <div className="symptoms-list-container" onClick={(e) => e.stopPropagation()}>
            {/* 根据搜索文本过滤症状列表 */}
            {availableSymptoms
              .filter(symptom => 
                searchText === '' || 
                symptom.toLowerCase().includes(searchText.toLowerCase())
              )
              .map((symptom, index) => (
                <div key={index} className="symptom-list-item">
                  <span className="symptom-name">{symptom}</span>
                  <button 
                    className="add-symptom-button"
                    onClick={() => handleAddSymptom(symptom)}
                  >
                    +
                  </button>
                </div>
              ))}
          </div>
        </div>
      )}
      
      {/* 底部功能按钮区 */}
      <div className="function-buttons">
        <button className="function-button settings">
          <span>⚙️</span>
        </button>
        <button 
          className="function-button search"
          onClick={handleSearchClick}
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
          </svg>
        </button>
        <button className="function-button notes" onClick={handleNavigateToModel}>
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
              <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
              <line x1="9" y1="12" x2="15" y2="12"></line>
              <line x1="9" y1="16" x2="15" y2="16"></line>
            </svg>
          </button>
      </div>
      
      {/* 下一步按钮 */}
      <button className="next-button" onClick={handleNextStep}>
        下一步 ⟶
      </button>
    </div>
  );
};

export default SymptomInput;